<template>
  <div class="container a2cbox" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box query-boxstudent">
      <el-form :model="queryBox" status-icon ref="queryBox">
        <el-row>
          <el-col :span="4">
            <el-form-item label prop="name">
              <el-input v-model="queryBox.schoolCode" placeholder="请输入内容">
                <template slot="prepend">学校编码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label prop="name">
              <el-input v-model="queryBox.schoolName" placeholder="请输入内容">
                <template slot="prepend">学校名称</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="reset('queryBox')"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          type="primary"
          @click="search"
        />
      </div>
    </div>
    <div class="add-btns fl">
      <kt-button
        :label="$t('新增')"
        perms="systemManage:dictionaryType:add"
        type="primary"
        @click="addType"
        style="float:left;"
      />
    </div>
    <div class="fr">
      <kt-button :label="$t('action.download-tmpl')" @click="download" perms="OEM:OEM:download" type="primary"></kt-button>
      <kt-button  :label="$t('action.batchimport')" :disabled='importIsSuccess' @click="batchImport" perms="OEM:OEM:batchimport" type="primary" ></kt-button>
    </div>
    <!--表格内容栏-->
    <div class="btn">
      <Crm-table
        SchoolDict
        class="table-width"
        permsEdit="systemManage:dictionaryType:edit"
        width="400"
        permsSee='true'
        @handleSee='handleSee'
        @handleEdit="handleEdit"
        :data="pageResult"
        :columns="columns"
        :loading="loading"
        @findPage="findPage"
      ></Crm-table>
    </div>
    <!-- 编辑 -->
    <el-dialog
      title="编辑"
      width="30%"
      :visible.sync="EidtPop"
      class="EidtPop"
      :close-on-click-modal="false"
     
    >
      <el-row>
        <el-col :span="5">
          <span>ID</span>
        </el-col>
        <el-col :span="16">
          {{ dataForm.id }}
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <span>学校编码</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="dataForm.schoolCode" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <span>学校名称</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="dataForm.schoolName" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>

      <el-button @click="EidtPop = false">取 消</el-button>
      <el-button type="primary" @click="Submit">保存</el-button>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog
      title="新增"
      width="30%"
      :visible.sync="AddPop"
      class="EidtPop"
      :close-on-click-modal="false">
      <el-row>
        <el-col :span="5">
          <span>学校编码</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="addDataForm.schoolCode" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <span>学校名称</span>
        </el-col>
        <el-col :span="16">
          <el-input v-model="addDataForm.schoolName" placeholder="请输入内容">
          </el-input>
        </el-col>
      </el-row>

      <el-button @click="AddPop = false">取 消</el-button>
      <el-button type="primary" @click="SubmitAddPop">保存</el-button>
    </el-dialog>
  <!--文件上传-->
    <!--导入-->
    <el-dialog :title="'批量导入'" width="30%" :visible.sync="uploadOem" :close-on-click-modal="false">
      <el-form :model="form" >
      <el-form-item >
        <el-upload
          ref="uploadExcel"
          :action='uploadUrl'
          :limit='limitNum'
          :auto-upload="false"
          accept=".xls"
          :before-upload="beforeUploadFile"
          :on-change="fileChange"
          :on-exceed="exceedFile"
          :on-success="handleSuccess"
          :on-error="handleError"
          :file-list="fileList">
          <el-button size="small"  plain>选择文件上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xls(Excel2007)文件</div>
        </el-upload>
      </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="uploadOem = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size" type="primary" @click.native="uploadFile">{{('立即上传')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { CodeToText } from "element-china-area-data";
import { baseUrl } from "@/utils/global";
import Cookies from "js-cookie";
import { regionDataPlus } from "element-china-area-data";
import axios from "axios";
import store from "@/store";
import { isMobile } from "@/utils/validate";
import { mapActions } from "vuex";
import CrmPermsBox from "@/views/Core/Crmpermsbox";

export default {
  name: "Student",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch,
    CrmPermsBox
  },
  data() {
    return {
      loading: false,
      EidtPop: false,
      AddPop:false,
      queryBox: {
        
      },
      width: 200,
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "schoolCode", label: "学校编码", minWidth: 100 },
        { prop: "schoolName", label: "学校名称", minWidth: 100 },
      ],
      pageResult: {
        content: []
      },
      dataForm: {},
      addDataForm:{},
      disabled:Boolean,
      uploadOem:false, //文件上传
      uploadOem2: false, //文件上传
      limitNum: 1, //上传最大个数
      form: {
        file: ""
      },
      fileList: [],
      fileList2: [],
      uploadUrl: baseUrl + "/file/upload", //文件上传地址
      downloadTmplUrl: baseUrl + "/template/studentImportTemplate.xlsx", //模板下载地址
      importIsSuccess:false,//导入是否成功
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.pageRequest = Object.assign({}, this.pageRequest, this.queryBox);
      this.$api.school
        .schoolDictPageList(this.pageRequest)
        .then(res => {
          let content = { content: res.data, totalSize: res.total };
          this.pageResult = content;

          this.loading = false;
        })
        .then(data != null ? data.callback : "");
    },

    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.schoolCode = "";
      this.queryBox.schoolName = "";
      this.pageRequest.pageNum = 1;
      this.findPage(null);
    },
    // 编辑
    handleEdit: function(params) {
      this.dataForm = Object.assign({}, params.row);
      this.EidtPop = true;
    },
    // 查看
    handleSee(params){
        this.$router.push({
        path: "/SystemManage/DictionaryData",
        query: {
          codeType: params.row.codeType
        }
      });
    },
    addType(){
      this.AddPop = true;
    },
    // 编辑保存
    Submit() {
      this.$api.school.schoolDictUpdate(this.dataForm).then(res => {
        if (res.result == 1) {
          this.$message({
            message: '编辑成功',
            type: "success"
          });
          this.EidtPop=false
          this.findPage(null)
        } else {
          this.$message({
            message:res.msg,
            type: "error"
          });
        }
      });
    },
    SubmitAddPop(){
      this.$api.school.schoolDictAdd(this.addDataForm).then(res => {
        if (res.result == 1) {
          this.$message({
            message: '保存成功',
            type: "success"
          });
          this.AddPop=false
          this.findPage(null)
          this.addDataForm={}
        } else {
          this.$message({
            message:'错误',
            type: "error"
          });
        }
      });
    },
    //批量导入
        batchImport:function () {
          this.uploadOem=true
        },
        // 文件超出个数限制时的钩子
        exceedFile(files, fileList) {
          this.$notify.warning({
            title: '警告',
            message: `只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`
          });
        },
        // 文件状态改变时的钩子
        fileChange(file, fileList) {
          this.form.file = file.raw
          console.log(file)
        },
        // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
        beforeUploadFile(file) {
          let extension = file.name.substring(file.name.lastIndexOf('.')+1)
          let size = file.size / 1024 / 1024
          if(extension !== 'xls') {
            this.$notify.warning({
              title: '警告',
              message: `只能上传Excel（即后缀是.xls）的文件`
            });0
          }
        },
        // 文件上传成功时的钩子
        handleSuccess(res, file, fileList) {
          this.$refs.uploadExcel.clearFiles()
          this.$notify.success({
            title: '成功',
            message: `文件上传成功,数据处理中,稍后在我的消息中查看！`
          });

        },
        // 文件上传失败时的钩子
        handleError(err, file, fileList) {
          this.$notify.error({
            title: '错误',
            message: `文件上传失败`
          });
        },
        uploadFile() {
          this.importIsSuccess=true
          // this.$refs.uploadExcel.submit()
          let formData = new FormData()
          formData.append('file', this.form.file)
          axios.post(this.uploadUrl, formData, { "Content-Type": "multipart/form-data" }).then(res => {
            if (res.data.result == 1) {
              let path=res.data.fileUrl
              this.$api.school.importSchool({path:path}).then(res => {
                if(res.result == 1){
                  this.handleSuccess()
                  this.uploadOem=false
                  this.importIsSuccess=false
                  this.findPage(null)
                }else{
                  this.importIsSuccess=false
                  this.$message({
                      message: res.msg,
                      type: "error"
                    });
                    // this.uploadOem=false
                }
                
              })
            }
            else{
              this.handleError()
            }
          })
        },
        //下载导入模板
        download:function () {
          this.getSchoolDictTempl()
        },
  },

  mounted() {
    this.findPage(null);
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
</style>
<style lang="scss">
.a2cbox {
  .el-table--mini th {
    padding: 5px 0 !important;
  }
  .btn .el-table--mini td {
    padding: 5px 0 !important;
  }
}
</style>
<style lang="scss">
.a2cbox {
  .el-table--mini th {
    padding: 5px 0 !important;
  }
  .btn .el-table--mini td {
    padding: 5px 0 !important;
  }
}
.EidtPop {
  .el-row {
    margin: 20px 0;
    span {
      margin-top: 9px;
      display: inline-block;
    }
  }
}
</style>
